<template>
  <Row class="je-admin-top je-admin-top-main" type="flex">
    <Col flex="none"><Logo ref="logoRef" @image-load="onImageLoad" /></Col>
    <Col flex="auto" style="overflow-x: auto" class="je-admin-menu-section">
      <Menu ref="menuRef" />
    </Col>
    <Col flex="none"><Actions ref="actionsRef" :actions="['SEARCH', 'WF', 'MSG']" /></Col>
  </Row>
</template>
<script>
  import { defineComponent, nextTick, ref } from 'vue';
  import { Row, Col } from '@jecloud/ui';
  import Menu from './components/menu.vue';
  import Logo from './components/logo.vue';
  import Actions from './components/actions.vue';
  import { useMenuStore } from '@/stores/menu-store';
  export default defineComponent({
    name: 'AdminTopMain',
    components: { Row, Col, Menu, Logo, Actions },
    props: { menu: { type: Boolean, default: true } },
    setup() {
      const logoRef = ref();
      const actionsRef = ref();
      const menuRef = ref();
      const menuStore = useMenuStore();
      const onImageLoad = () => {
        if (menuStore.topMenuAlign === 'center') {
          nextTick(() => {
            const width = Math.max(logoRef.value?.getSize(), actionsRef.value?.getSize()) + 'px';
            actionsRef.value && (actionsRef.value.$el.style.width = width);
            logoRef.value && (logoRef.value.$el.style.width = width);
          });
        }
      };

      return { logoRef, actionsRef, menuRef, onImageLoad };
    },
  });
</script>
<style lang="less">
  @import './assets/top.less';
  .je-admin-top-main {
    .MENU_TOP();
  }
</style>
